/**
 * Created by Administrator on 2017/3/21.
 */
import React, { Component,Fragment } from 'react';
import { Form, Button, Badge, Select, DatePicker, Radio, Descriptions, Input, Typography, Icon } from 'antd';
import { connect } from 'dva';
import moment from 'moment';
import request from '@/utils/request';
import { download, leaveStatue,leaveStatueImg,printLeave } from '@/utils/utils';
import config from '@/config/config';
import PartPerson from '@/pages/PersonalLeave/PartPerson';
import filter from 'lodash/filter';

const { Paragraph } = Typography;
const { TextArea } = Input;
const { Option } = Select;

const ButtonGroup = Button.Group;

class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fileList: [],
      all_users: [],
      format: 'YYYY-MM-DD',
    };
  }
  renderStatus=(item)=>{
    let statusColor1=''
    let statucText=''
    if(item.status===2){
      statusColor1='#7b00ff'
      statucText='等待审批'
    }else if(item.status===3){
      statusColor1='#ff0006'
      statucText=' 不通过审批'
    }else if(item.status===4){
      statusColor1='#1e9680'
      statucText=' 通过审批'
    }
    return <div style={{color:statusColor1}}>  {statucText}</div>
  }
  renderPart=(sort)=>{
    const that=this;
    return <Fragment>
      <div style={{
        display: 'flex',
        fontWeight: 'bold',
        lineHeight: '32px',
        height: '32px',
        background: 'rgb(249,249,249)',
      }}>
        <div style={{ width: '50px', paddingLeft: '10px', border: '1px solid #d9d9d9' }}>序号</div>
        <div style={{ flex: '1', paddingLeft: '10px', border: '1px solid #d9d9d9' }}>审批部门</div>
        <div style={{ flex: '1', paddingLeft: '10px', border: '1px solid #d9d9d9' }}>审批人</div>
        <div style={{ flex: '1', paddingLeft: '10px', border: '1px solid #d9d9d9' }}>审批结果</div>
        <div style={{ flex: '1', paddingLeft: '10px', border: '1px solid #d9d9d9' }}>审批时间</div>
        <div style={{ flex: '1', paddingLeft: '10px', border: '1px solid #d9d9d9' }}>审批备注</div>
      </div>
      {
        filter(this.props.editRecord.reviewers,function(o){
          return Number(o.sort)===sort
        }).map((item,index)=>{
          return <div style={{ display: 'flex',height:'32px',  lineHeight: '32px', fontWeight:'normal'}} className={'custom-table-form'} key={index} >
            <div style={{ width: '50px', lineHeight: '29px', textAlign: 'center', border: '1px solid #d9d9d9' }}>
              {index + 1}
            </div>
            <div title={item.department_name} style={{ flex: '1', marginRight: '0', width: '100%', border: '1px solid #d9d9d9',padding:'0 10px',whiteSpace:'nowrap',
            textOverflow:'ellipsis',overflow:'hidden'}}>
              {item.department_name}
            </div>
            <div title={item.name} style={{ flex: '1', marginRight: '0', width: '100%', border: '1px solid #d9d9d9',padding:'0 10px' ,whiteSpace:'nowrap',
              textOverflow:'ellipsis',overflow:'hidden'}}>
              {item.name}
            </div>
            <div style={{ flex: '1', marginRight: '0', width: '100%', border: '1px solid #d9d9d9',padding:'0 10px' }}>
              {that.renderStatus(item)}
            </div>
            <div title={item.operating_time} style={{  flex: '1',lineHeight: '29px',  border: '1px solid #d9d9d9',padding:'0 10px',whiteSpace:'nowrap',
              textOverflow:'ellipsis',overflow:'hidden' }}>
              {item.operating_time.slice(5)}
            </div>
            <div title={item.remark} style={{  flex: '1',lineHeight: '29px',  border: '1px solid #d9d9d9',padding:'0 10px' ,whiteSpace:'nowrap',
              textOverflow:'ellipsis',overflow:'hidden'}}>
              {item.remark}
            </div>


          </div>
        })
      }
    </Fragment>
  }
  render() {
    const that=this;
    return (
      <div>
        <Form>
          {leaveStatueImg(this.props.editRecord.status)}
          <Descriptions column={4} className={'blue-descriptions'} title={<div style={{ textAlign: 'center' }}>文件详情</div>}
                        bordered>
                        <Descriptions.Item label="提交部门" span={4}>
                          {this.props.editRecord.submitter.department_name}
                        </Descriptions.Item>
            <Descriptions.Item label="提交者"  span={2}>
              {this.props.editRecord.submitter.name}
            </Descriptions.Item>

            <Descriptions.Item label="创建时间" span={2}>
              {this.props.editRecord.created_at}
            </Descriptions.Item>
            <Descriptions.Item label="文件名称" span={2}>
              {this.props.editRecord.file_name}
            </Descriptions.Item>
            <Descriptions.Item label="文件类型" span={2}>
              {this.props.editRecord.file_type}
            </Descriptions.Item>
            <Descriptions.Item label="来文单位" span={2}>
              {this.props.editRecord.issue_unit}
            </Descriptions.Item>
            <Descriptions.Item label="来文时间" span={2}>
              {this.props.editRecord.issue_time}
            </Descriptions.Item>
            <Descriptions.Item label="文件说明" span={4} style={{ whiteSpace: 'wrap' }}>
              <Paragraph style={{ fontWeight: 'bold', color: '#000' }} ellipsis={{ rows: 2, expandable: true }}>
                {this.props.editRecord.description}
              </Paragraph>
            </Descriptions.Item>
            <Descriptions.Item label="文件附件" span={4}>
              {
                this.props.editRecord.attachments.map((item, index) => {
                  return <div>
                    <Button type={'primary'} key={index} onClick={() => {
                      download(`${config.prefix}/audited_documents/${this.props.editRecord.id}/attachments/${item.key}/download?token=Bearer ${sessionStorage.getItem('token')}`);
                    }
                    }>点击下载附件</Button> {item.name}

                  </div>;
                })
              }
            </Descriptions.Item>

            <Descriptions.Item label="状态" span={4}>
              {leaveStatue(this.props.editRecord.status)}
            </Descriptions.Item>

            <Descriptions.Item label="审核意见" span={4}>
              {
                this.renderPart(1)
              }
            </Descriptions.Item>
         {/*   {
              this.props.editRecord.reviewers.map((item,index)=>{
                let statusColor1=''
                let statucText=''
                if(item.status===2){
                  statusColor1='#006af0'
                }else if(item.status===3){
                  statusColor1='#ff0006'
                  statucText=' 不通过'
                }else if(item.status===4){
                  statusColor1='#1e9680'
                  statucText=' 通过'
                }
                return <Fragment key={index}>
                  <Descriptions.Item label="审批人" span={1}>
                    <div style={{color:statusColor1}}>  {item.name}</div>
                  </Descriptions.Item>
                  <Descriptions.Item label="审批时间" span={1}>
                    <div style={{color:statusColor1}}>  {item.operating_time + statucText}</div>
                  </Descriptions.Item>
                  <Descriptions.Item label="备注" span={3}>
                    <div style={{color:statusColor1}}>  {item.remark}</div>
                  </Descriptions.Item>
                </Fragment>
              })
            }*/}
          </Descriptions>
        </Form>
        {
          this.props.editRecord.status===4&&<Button
            style={{marginTop:'10px'}}
            type="primary"
            icon="printer"
            className={'btn-cyan'}
            block
            onClick={(e) => {
              printLeave(this.props.editRecord);
            }
            }
          >打印请假单
          </Button>
        }
      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);
